.music-play-list {
  margin-top: 5px;

  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    padding: 0 10px 0 36px;

    .title-left {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      cursor: pointer;

      .icon-arrow {
        position: absolute;
        top: 0;
        left: -18px;
        border: 8px solid #ccc;
        border-color: transparent transparent transparent #ccc;
        border-style: dashed dashed dashed solid;
        cursor: pointer;
      }

      .icon-down-arrow {
        top: 3px;
        left: -18px;
        border-width: 8px 7px 0;
        border-color: #ccc transparent transparent;
        border-style: solid dashed dashed;
      }

      .text {
        font-family: simsun, '\5b8b\4f53', sans-serif;
        font-size: 14px;
        color: #000;
      }
    }

    .title-right {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 52px;
      height: 22px;
      background: url('@/assets/image/my-music/icon-button.png') no-repeat;
      background-position: 0 -96px;
      cursor: pointer;

      &:hover {
        background-position: -94px -39px;
      }

      .text {
        font-size: 12px;
        color: #515151;
        text-indent: 12px;
      }
    }
  }

  .list {
    .item {
      position: relative;
      zoom: 1;
      height: 42px;
      padding: 6px 0 6px 20px;
      text-align: left;
      cursor: pointer;

      .item-left {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 10px;
        vertical-align: middle;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .item-right {
        display: inline-block;
        vertical-align: middle;

        .name,
        .num {
          display: block;
        }

        .name {
          width: 150px;
          margin-top: 2px;
          margin-bottom: 8px;
          overflow: hidden;
          color: #000;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .num {
          display: inline-block;
          color: #999;
          vertical-align: top;
        }

        .right-desc {
          display: inline-block;
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: normal;
          white-space: nowrap;
          vertical-align: top;
        }
      }

      .item-operate {
        position: absolute;
        right: 0;
        bottom: 8px;
        display: none;

        .operate-icon {
          display: inline-block;
          margin-right: 10px;
          vertical-align: middle;
          cursor: pointer;
          background: url('@/assets/image/icon.png') no-repeat;
          background-position: 0 -96px;
        }

        .operate-edit {
          width: 13px;
          height: 13px;
          background-position: 0 -270px;
        }

        .operate-delete {
          width: 13px;
          height: 14px;
          background-position: 0 -284px;
        }
      }
    }

    .item:hover {
      background-color: #f4f2f2;

      .item-operate {
        display: block;
      }
    }

    .active-item {
      background-color: #e6e6e6;
    }

    .active-item:hover {
      background-color: #e6e6e6;
    }
  }
}

::v-deep(.song-sheet-dialog) {
  .dialog-box {
    width: 480px;
  }

  .content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
    text-align: center;
  }
}

::v-deep(.add-song-sheet) {
  .dialog-bottom {
    margin-left: 86px;
    text-align: left;
  }

  .content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
    text-align: left;

    .form {
      margin-left: 30px;

      .name {
        display: inline-block;
        vertical-align: middle;
      }

      .input {
        display: inline-block;
        width: 330px;
        height: 19px;
        padding: 5px 6px 6px;
        margin: 0;
        line-height: 19px;
        vertical-align: middle;
        border: 1px solid #cdcdcd;
        border-radius: 2px;
        outline: none;
        box-sizing: content-box;
      }
    }

    .desc {
      margin: 8px 0 20px 86px;
      color: #999;
    }
  }
}